<template>
    <div class="pagestyle" :style="{background:settingsStore.isDark?'rgba(255,255,255,.8)':''}">
        <el-row :gutter="20">
            <el-col :span="24">
                <!-- 头部展示 -->
                <div class="topBox">
                    <span><span class="title">开出口信息</span>
                        <span style="margin-top: 4px;">{{state.formData.dateTime}}</span>
                        <span class="freshBox" @click="freshBoxClick">
                            <svg-icon icon-class="shuaxin" />刷新</span></span>
                    <span>
                        <span :style="{
                         color:state.formData.stationStatusStr=='正常'?'rgba(103, 194, 58, 1)':'rgba(245, 108, 108, 1)'
                        }">{{state.formData.stationStatusStr}}</span>
                        <span style="margin: 0 16px;">所属分站</span>
                        <span>
                            <el-select v-model="state.formData.stationCode" placeholder="请选择" size="mini"
                                @change="stationCodeChange">
                                <template #prefix>
                                    <span style="display: inline-block;width: 6px;height: 6px;border-radius: 50%;"
                                        :style="{backgroundColor:state.formData.stationStatusStr=='正常'?'rgba(103, 194, 58, 1)':'rgba(245, 108, 108, 1)'}"></span>
                                </template>
                                <el-option v-for="item in state.selectList" :key="item.stationCode"
                                    :label="item.stationCode+'-'+item.stationTypeName" :value="item.stationCode">
                                </el-option>
                            </el-select>
                        </span>
                        <el-popover placement="bottom" trigger="click">
                            <template #reference>
                                <el-button :disabled="state.formData.stationStatusStr!='正常'" type="text"
                                    :class="'listInfoBtn'" >
                                    <svg-icon  class-name="search-icon" icon-class="qitashezhi" />
                                    操作
                                </el-button>
                            </template>
                            <div class="caozuoBox">
                                <div @click="caozuoBoxClick(item)" v-for="item in state.caozuoBoxList">{{item.label}}
                                </div>
                            </div>
                        </el-popover>
                    </span>
                </div>
            </el-col>
            <!-- 卡片区展示 -->
            <el-col :span="8" v-for="item in state.opList">
                <div class="openBox" :style="{backgroundColor:item.controlPointStatus==0?'rgba(103, 194, 58, 0.08)':
                    item.controlPointStatus==1?'rgba(245, 108, 108, 0.08)':'rgba(91, 109, 128, 0.04)'
                }">
                    <div class="openTitle">
                        <span>
                            <span class="title">
                                {{ item.controlPointId }}
                            </span>
                            <span :style="{color:item.controlPointStatus==0?'rgba(103, 194, 58, 1)':
                    item.controlPointStatus==1?'rgba(245, 108, 108, 1)':'rgba(230, 162, 60, 1)'
                }">
                                <em :style="{backgroundColor:item.controlPointStatus==0?'rgba(103, 194, 58, 1)':
                    item.controlPointStatus==1?'rgba(245, 108, 108, 1)':'rgba(230, 162, 60, 1)'
                }"></em>
                                {{ item.controlPointStatusName }}
                            </span>
                        </span>
                        <span>
                            <span v-if="item.feedPointId!=null">馈电测点</span>
                            <span
                                :style="{color:item.feedPointStatusName=='正常'?'rgba(103, 194, 58, 1)':'rgba(245, 108, 108, 1)'}"
                                v-if="item.feedPointId!=null">
                                {{ item.feedPointId }}
                                <em
                                    :style="{backgroundColor:item.feedPointStatusName=='正常'?'rgba(103, 194, 58, 1)':'rgba(245, 108, 108, 1)'}"></em>
                                {{ item.feedPointStatusName }}
                            </span>
                            <span class="iconBox" @click="iconBoxChartClick(item)"
                                style="color: rgba(64, 158, 255, 1);">
                                <svg-icon icon-class="quxian-g77hanc6" />
                            </span>
                        </span>
                    </div>
                    <div class="subBox">
                        <div style="display: flex;">
                            <span v-for="(itemsub,index) in item.cuts" @click="itemsubnameClick(index)">
                                <div v-if="item.controlPointStatus!=0" class="itemsubname">
                                    <span :style="{backgroundColor:index==state.itemsubnameIndex?'rgba(255, 255, 255, 0.6)':'',
                                    color:index==state.itemsubnameIndex?'rgba(62, 70, 79, 1)':''
                                }">{{ itemsub.title }}</span></div>
                            </span>
                        </div>
                        <div class="itemsubpBoxBox" :style="{minHeight:item.controlPointStatus!=1||item.cuts==null?'234px':'',
                            backgroundColor:item.controlPointStatus!=1||item.cuts==null?'rgba(255, 255, 255, 0.6)':''
                        }">
                            <span v-for="(itemsub,index) in item.cuts">
                                <div class="itemsubpBox" v-if="state.itemsubnameIndex==index">
                                    <div v-if="item.controlPointStatus==1">
                                        <p class="itemsubp">
                                            <span class="l">{{ item.controlPointStatusName }}测点</span>
                                            <span>{{ itemsub.cutPoint }}</span>
                                        </p>
                                        <p class="itemsubp">
                                            <span class="l">{{ item.controlPointStatusName }}时间</span>
                                            <span>{{ itemsub.cutTime }}</span>
                                        </p>
                                        <p class="itemsubp">
                                            <span class="l">{{ item.controlPointStatusName }}时长</span>
                                            <span>{{ itemsub.cutPeriod }}</span>
                                        </p>
                                        <p class="itemsubp">
                                            <span class="l">{{ item.controlPointStatusName }}原因</span>
                                            <span>{{ itemsub.cutReason }}</span>
                                        </p>
                                    </div>
                                </div>
                            </span>
                            <div class="itemsubpBox" v-if="item.controlPointStatus==0">
                                <p class="itemsubp">
                                    <span class="l">复电时间</span>
                                    <span>{{ item.stateStartTime }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 控制弹框 -->
        <!-- <teleport to="body"> -->
            <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="500" v-model="state.addModal" resize
                :mask="true" showFooter>
                <template #title>
                    <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
                </template>
                <template #default>
                    <div class="form_box" v-if="!state.xiafaDis">
                        <el-form ref="formRef" :model="state.formData" :rules="state.rules" :label-width="50"
                            label-position="left">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="分站" prop="mutationType">
                                        <el-select class="w100"  filterable
                                            v-model="state.formData.mutationType" placeholder="请选择"
                                            @change="mutationTypeChange">
                                            <template #prefix>
                                                <span
                                                    style="display: inline-block;width: 6px;height: 6px;border-radius: 50%;"
                                                    :style="{backgroundColor:state.formData.stationStatusStrp=='正常'?'rgba(103, 194, 58, 1)':'rgba(245, 108, 108, 1)'}"></span>
                                            </template>
                                            <el-option v-for="item in state.selectList" :key="item.stationCode"
                                                :label="item.stationCode+'-'+item.stationTypeName"
                                                :value="item.stationCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24" v-if="state.modalTitleType ==1">
                                    <el-row :gutter="20">
                                        <el-col :span="24">
                                            开出口信息
                                        </el-col>
                                        <el-col :span="8" v-for="(item,index) in state.opListpointId">
                                            <div class="switchBox">
                                                <span>{{ item.controlPortID }}</span>
                                                <el-switch v-model="state.opListpointId[index].controlPortData"
                                                    v-if="state.opListpointId[index].controlPortData==0||
                                                    state.opListpointId[index].controlPortData==1"
                                                    inline-prompt
                                                    style="--el-switch-on-color: #13ce66; 
                                                    --el-switch-off-color: #ff4949"
                                                    active-text="开" inactive-text="关" 
                                                    active-value="0"
                                                    inactive-value="1" />
                                                <span v-else
                                                    style="background-color: rgba(91, 109, 128, 1);padding: 4px 10px;border-radius: 20px;color: #fff;">未知</span>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-col>
                                <el-col :span="24" v-if='state.modalTitleType ==2'>
                                    <el-form-item label="命令">
                                        <el-button type="primary" plain @click="fudianClick">复位无主断电</el-button>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24" v-if='state.modalTitleType ==3'>
                                    <el-form-item label="命令">
                                        <el-button :type="state.chongqibtn==1?'primary':''"  @click="chongqiClick(1)">分站重启</el-button>
                                        <el-button :type="state.chongqibtn==2?'primary':''"  @click="chongqiClick(2)">解锁3.0闭锁</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="form_box" v-else>
                        <vxe-table :data="state.opListpointId" border="inner" :loading="state.xiafaDisLoading"
                            @checkbox-change="checkchange" @checkbox-all="checkchangeAll">
                            <!-- <vxe-column type="checkbox" :width="44"></vxe-column> -->
                            <vxe-column type="seq" title="序号">
                            </vxe-column>
                            <vxe-column field="controlPortID" title="开出口">
                            </vxe-column>
                            <vxe-column field="oldControlPortData" title="修改前">
                                <template #default="{row}">
                                    <span>{{ row.oldControlPortData==null?'未知':Number(row.oldControlPortData)==0?'开':'关'  }}</span>
                                </template>
                            </vxe-column>
                            <vxe-column field="controlPortData" title="修改后">
                                <template #default="{row}">
                                    <span>{{ row.controlPortData==null?'未知':Number(row.controlPortData)==0?'开':'关' }}</span>
                                </template>
                            </vxe-column>
                            <vxe-column title="当前状态">
                                <template #default="{row}">
                                    <el-tag size="mini" type="primary" plain>待下发</el-tag>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </template>
                <template #footer>
                    <p style="display: flex;justify-content: space-between;"
                        :style="{justifyContent:state.modalTitleType ==1&&!state.xiafaDis?'space-between':'end'}">
                        <el-button @click="freshBoxClick" v-if="state.modalTitleType ==1&&!state.xiafaDis">刷新
                        </el-button>
                        <span>
                            <el-button @click="cancel">取消</el-button>
                            <el-button v-if="!state.xiafaDis" :disabled="state.formData.stationStatusStrp!='正常'"
                                type="primary" @click="submitForm" :loading="state.xiafaDisLoading">下发</el-button>
                            <el-button v-else :disabled="state.formData.stationStatusStrp!='正常'" type="primary"
                                @click="submitFormpoint">下发</el-button>
                        </span>
                    </p>
                </template>
            </vxe-modal>
        <!-- </teleport> -->
        <!-- 图表抽屉 -->
        <el-drawer v-model="state.drawerShow" direction="rtl" size="40%" close-on-click-modal :modal="true">
            <template #header="{ close, titleId, titleClass }">
                <h4 class="mask_sub_title">
                    <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>断电曲线&列表</span></h4>
            </template>
            <div>
                <el-row :gutter="20">
                    <el-col :span="24" class="drawerBox">
                        <div class="drawerTitle">
                            <span>分站 <em>{{ state.formData.stationCode }}</em></span>
                            <span>开出口 <em>{{state.formData.controlPointId}}</em></span>
                            <span>当前状态 <em
                                    :style="{color:state.formData.controlPointStatus == 0?'rgba(103, 194, 58, 1)':
                    state.formData.controlPointStatus==1?'rgba(245, 108, 108, 1)':'rgba(230, 162, 60, 1)'}">{{state.formData.controlPointStatusName}}</em></span>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div style="margin-top: 16px;">
                            <span style="margin-right: 16px;">时间</span>
                            <el-date-picker v-model="state.chartTime" type="datetimerange" range-separator="-"
                                start-placeholder="开始时间" end-placeholder="结束时间" />
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div id="kongzhiChart" style="height: 192px;"></div>
                    </el-col>
                    <el-col :span="24">
                        <vxe-table :data="state.options.tabledata" border="inner">
                            <vxe-column type="seq" title="序号">
                            </vxe-column>
                            <vxe-column v-for="(item, index) in state.options.tableheads" :field="item.field"
                                :title="item.title" :key="index">
                            </vxe-column>
                        </vxe-table>
                        <div v-if="state.options.total > 0" class="w100 pagevxe"
                            style="height: 35px;position: relative;margin: 10px 0;">
                            <el-pagination class="globalFontSize" v-model:current-page="state.options.currentPage"
                                v-model:page-size="state.options.pageSize" :page-sizes="[10, 20, 30, 40]" background
                                layout="total, sizes, prev, pager, next, jumper" :total="state.options.total"
                                @size-change="pagechangeSize" @current-change="pagechange"
                                style="position: absolute;right: 10px;" />
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-drawer>
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        onMounted,
        reactive
    } from "vue";
    import {
        table_headers
    } from "@/components/commonCom/table_headers";
    import axios from "@/utils/request";
    import * as echarts from "echarts";
    import dayjs from "dayjs";
    import useSettingsStore from "@/store/modules/settings";
    const settingsStore = useSettingsStore();
    const {
        proxy
    } = getCurrentInstance();
    let itv = null;
    let chartCon
    let state = reactive({
        chongqibtn:1,
        chartTime: [],//抽屉时间变量
        fudianClickShow: false,//控制复电按钮选择
        chongqiClickShow: false,//控制重启按钮选择
        jiesuoClickShow: false,//控制闭锁按钮选择
        xiafaDisLoading: false,//下发弹框加载效果
        xiafaDis: false,//控制下发列表展示
        options: {//抽屉弹框列表属性展示
            total: 0,
            pageNum: 1,
            pageSize: 10,
            tabledata: [],
            tableheads: computed(() => table_headers.controlDataLine)
        },
        modalTitleType: 1,//操作下拉按钮选择属性
        modalTitle: '手动控制断电',//弹框标题展示属性
        addModal: false,//弹框显隐展示
        drawerShow: false,//抽屉显隐展示
        selectList: [],//分站下拉属性
        formData: {//分站表单
            stationCode: '',
            stationStatusStr: '',
            statusTime: ''
        },
        opList: [],//开出口列表属性
        opListpointId: [],//弹框开出口展示属性
        opListpointIdcheck: [],//弹框开出口列表选中属性
        itemsubnameIndex: 0,//卡片副标题选中属性
        caozuoBoxList: [{//操作下拉列表展示属性
                label: '手动控制断电',
                type: 1
            },
            {
                label: '复位无主断电',
                type: 2
            }, {
                label: '远程控制分站',
                type: 3
            }
        ],
        mutationTypeShow:false
    });
    // 获取分站下拉数据
    function getlistStationInfo() {
        return new Promise((resolve, reject) => {
            axios.post('/realStationData/listStationInfo', {
            }).then(res => {
                resolve(res.data.list)
            })
        })
    }
    // 接口等待处理
    async function getlistStationInfoData() {
        state.selectList= await getlistStationInfo()
        if (state.selectList.length > 0) {
            state.formData.stationCode = state.selectList[0].stationCode
            state.formData.stationStatusStr = state.selectList[0].stationStatusStr
            state.formData.statusTime = state.selectList[0].statusTime
            state.formData.dateTime = state.selectList[0].dataTime
            getcontrolInfos(state.formData.stationCode)
        }
    }
    getlistStationInfoData()
    // 首页分站下拉事件
    function stationCodeChange(val) {
        state.mutationTypeShow=false
        getcontrolInfos(val)
        state.selectList.forEach(item => {
            if (item.stationCode == val) {
                state.formData.stationStatusStr = item.stationStatusStr
                state.formData.statusTime = item.statusTime
                state.formData.dateTime = item.dataTime
            }
        })
    }
    // 获取开出口列表接口
    function getcontrolInfos(val) {
        axios.get('/controlPort/controlInfos?stationCode=' + val).then(res => {
            if(!state.mutationTypeShow){
                state.opList = res.data
            }
            state.opListpointId = res.data.map(item => {
                return {
                    controlPortID: item.controlPointId,
                    controlPortData:item.controlPointStatus.toString(),
                    oldControlPortData: item.controlPointStatus.toString()
                }
            })
        })
    }
    // 下发按钮
    function submitForm() {
        if (state.modalTitleType == 1) {
            state.xiafaDis = true
            state.xiafaDisLoading = false
        } else if (state.modalTitleType == 2 && state.fudianClickShow) {
            state.xiafaDisLoading = true
            axios.get('/controlPort/clearRemoteCutEle?stationCode=' + state.formData.mutationType).then(res => {
                proxy.$modal.msgSuccess(res.msg);
                state.addModal = false
                state.fudianClickShow = false
                state.xiafaDisLoading = false
            })
        } else if (state.modalTitleType == 3 && state.chongqiClickShow) {
            state.xiafaDisLoading = true
            axios.get('/controlPort/restartStation?stationCode=' + state.formData.mutationType).then(res => {
                proxy.$modal.msgSuccess(res.msg);
                state.addModal = false
                state.chongqiClickShow = false
                state.xiafaDisLoading = false
            })
        } else if (state.modalTitleType == 3 && state.jiesuoClickShow) {
            state.xiafaDisLoading = true
            axios.get('/controlPort/unLockGas?stationCode=' + state.formData.mutationType).then(res => {
                proxy.$modal.msgSuccess(res.msg);
                state.addModal = false
                state.jiesuoClickShow = false
                state.xiafaDisLoading = false
            })
        } else {
            proxy.$modal.msgWarning('请选择相应的命令按钮');
        }
    }
    // 复电无主断电
    function fudianClick() {
        state.fudianClickShow = true
    }
    
    function chongqiClick(type) {
        state.chongqibtn=type
        if(type==1){// 分站重启
            state.chongqiClickShow = true
        }else if(type==2){// 解锁3.0闭锁
            state.jiesuoClickShow = true
        }
    }
    // 解锁3.0闭锁
    function jiesuoClick() {
        state.jiesuoClickShow = true
    }
    /**
     * 
     * @param e 下发功能
     */
    // 选中下发
    function checkchange(e) {
        state.opListpointIdcheck = e.records
    }
    function checkchangeAll(e){
        state.opListpointIdcheck = e.records
    }
    // 手动控制下发按钮操作
    function submitFormpoint() {
        // if(state.opListpointIdcheck==0){
        //     proxy.$modal.msgWarning('请选择所要下发的数据!');
        // }else{
            state.xiafaDisLoading = true
            axios.post('/controlPort/setControlPort', {
                stationCode: state.formData.mutationType,
                controlPort: state.opListpointId
            }).then(res => {
                if(res.code == 200){
                    state.addModal = false
                    state.xiafaDisLoading = false
                    state.xiafaDis=false
                    proxy.$modal.msgSuccess(res.msg);
                }else{
                    state.xiafaDisLoading = false 
                    proxy.$modal.msgWarning(res.msg);
                }
            })
        // }
    }
    // 卡片子标题点击事件
    function itemsubnameClick(index) {
        state.itemsubnameIndex = index
    }
    // 操作下按钮点击事件-弹框
    function caozuoBoxClick(item) {
        clearInterval(itv)
        state.modalTitle = item.label
        state.addModal = true
        state.xiafaDis=false
        state.formData.stationStatusStrp = state.formData.stationStatusStr
        state.modalTitleType = item.type
        state.formData.mutationType = state.formData.stationCode
        getcontrolInfos(state.formData.mutationType)
    }
    // 控制弹框分站下拉事件
    function mutationTypeChange(val) {
        state.mutationTypeShow=true
        getcontrolInfos(state.formData.mutationType)
        state.selectList.forEach(item => {
            if (item.stationCode == val) {
                state.formData.stationStatusStrp = item.stationStatusStr
                state.formData.statusTime = item.statusTime
            }
        })
    }
    // 弹框取消按钮
    function cancel() {
        if (state.xiafaDis) {
            state.xiafaDis = false
        } else {
            state.addModal = false
        }
    }
    // 曲线图标点击事件-抽屉
    function iconBoxChartClick(item) {
        clearInterval(itv)
        state.formData.controlPointId = item.controlPointId
        state.formData.controlPointStatus = item.controlPointStatus
        state.formData.controlPointStatusName = item.controlPointStatusName
        state.drawerShow = true
        state.chartTime = [dayjs().format('YYYY-MM-DD 00:00:00.000'), dayjs().format('YYYY-MM-DD hh:mm:ss.000')]
        getline()
        getlistControlFaultDetail()
    }
    // 刷新点击事件
    function freshBoxClick() {
        getcontrolInfos(state.formData.stationCode)
        getlistStationInfo()
    }
    // 获取曲线展示数据接口
    function getline() {
        axios.post('/control/fault/line', {
            controlPointId: state.formData.stationCode + 'C' + state.formData.controlPointId,
            stateStartTime: state.chartTime[0],
            stateEndTime: state.chartTime[1]
        }).then(res => {
            let xdata = []
            let data = []
            if (res.data.length > 0) {
                xdata = res.data.map(item => {
                    return dayjs(item.stateStartTime).format('hh:mm')
                })
                data = res.data.map(item => {
                    return item.controlPointStatus
                })
            }
            nextTick(() => {
                chartCon = echarts.init(document.getElementById("kongzhiChart"));
                setC1(xdata, data)
            })
        })
    }
    // 曲线
    function setC1(xdata, data) {
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#57617B'
                    }
                }
            },
            grid: {
                left: '1%',
                top: '10%',
                right: '4%',
                bottom: '10%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(62, 70, 79, 0.6)'
                    }
                },
                axisTick: {
                    show: false
                },
                data: xdata
            }],
            yAxis: [{
                type: 'value',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(62, 70, 79, .6)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 12
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(62, 70, 79, .01)'
                    }
                }
            }],
            series: [{
                type: 'line',
                step: "start",
                smooth: false,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 2
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'rgba(74, 174, 255, 1)'
                    }
                },
                data: data
            }]
        };
        chartCon.setOption(option, true)
    }
    // 获取抽屉弹框列表展示数据接口
    function getlistControlFaultDetail() {
        axios.post('/control/fault/listControlFaultDetail', {
            pageNum: state.options.pageNum,
            pageSize: state.options.pageSize,
            controlPointId: state.formData.stationCode + 'C' + state.formData.controlPointId,
            stateStartTime: state.chartTime[0],
            stateEndTime: state.chartTime[1]
        }).then(res => {
            state.options.tabledata = res.data.list
            state.options.total = res.data.total
        })
    }
    // 分页
    function pagechange(val) {
        state.options.pageNum = val
        getlistControlFaultDetail()
    }
    // 分页
    function pagechangeSize(val) {
        state.options.pageNum = 1
        state.options.pageSize = val
        getlistControlFaultDetail()
    }
    onMounted(() => {
        itv = setInterval(() => {
            getcontrolInfos(state.formData.stationCode)
            getlistStationInfo()
        }, 10000)
    });
    onUnmounted(() => {
        clearInterval(itv)
    })
</script>
<style lang="scss" scoped>

.pagestyle{
    border-radius: 8px;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
        padding: 15px 16px;
        margin: 12px;
}
.darkform{
    :deep(.listInfoBtn){
        color: #fff;
        background-color: transparent;
        }
    :deep(.el-icon){
        color: #fff;
        }
        :deep(.el-input__inner) {
            --el-input-placeholder-color: #fff;
            color: #fff;
        }

        :deep(label, .el-form-item__label) {
            color: #fff;
        }

        :deep(.el-input__wrapper) {
            background-color: rgba(255, 255, 255, 0.08);
        }
}
    .switchBox {
        border-radius: 4px;
        background: rgba(91, 109, 128, 0.08);
        padding: 16px 20px 16px 20px;
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .caozuoBox {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: flex-start;

        div {
            padding: 6px;
            cursor: pointer;
        }
    }

    .topBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        color: rgba(62, 70, 79, 0.8);

        .title {
            font-weight: bold;
            margin-right: 16px;
        }

        .freshBox {
            cursor: pointer;
            margin-left: 16px;
        }

        span {
            display: flex;
            align-items: center;
        }
    }

    .openBox {
        margin-top: 16px;
        padding: 16px;
        border-radius: 2px;

        .openTitle {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            align-items: center;

            .title {
                font-weight: bold;
            }

            span {
                display: flex;
                align-items: center;
            }

            em {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 10px;
                margin-left: 16px;
            }

            .iconBox {
                margin-left: 16px;
                cursor: pointer;
            }
        }
    }

    .subBox {
        font-size: 14px;
        margin-top: 16px;
        min-height: 234px;

        .itemsubname {
            span {
                cursor: pointer;
                padding: 6px 10px;
                color: rgba(62, 70, 79, .6);

                &:first-child {
                    font-weight: bold;
                    border-radius: 2px 2px 0 0;
                }
            }
        }

        .itemsubpBox {
            margin-top: 5px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 2px;
            padding: 16px;
            min-height: 210px;

            .itemsubp {
                padding: 6px 0;

                .l {
                    color: rgba(62, 70, 79, 0.6);
                    margin-right: 16px;
                }
            }
        }

        p {
            padding: 0;
            margin: 5px 0;
        }
    }

    .drawerBox {
        padding: 12px;
        border-radius: 4px;
        background: rgba(64, 158, 255, 0.08);

        .drawerTitle {
            color: rgba(62, 70, 79, 0.6);
            font-size: 16px;

            span {
                margin-right: 16px;
            }

            em {
                font-style: normal;
                color: rgba(62, 70, 79, 1);
                margin-left: 10px;
            }
        }
    }
</style>